<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="85vw" align-center
			   destroy-on-close @closed="$emit('closed')" :close-on-click-modal="false">
		<div class="widgets-content">
			<el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="150px" label-position="right">
				<el-card class="box-card">
					<el-row :gutter="1">
						<el-col :span="24">
							<div class="titleBox titleBox1">
								基本信息
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :span="4">
							<el-form-item label="表单标识" prop="types">
								<el-input v-model="form.types" placeholder="请输入表单标识" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="表单名称" prop="types_name">
								<el-input v-model="form.types_name" placeholder="请输入表单名称" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="文字颜色" prop="form_color">
								<el-color-picker v-model="form.form_color" :predefine="colorList">></el-color-picker>
							</el-form-item>
						</el-col>
                        <el-col :span="4">
                            <el-form-item label="模板对象" prop="print_group_id">
                                <el-cascader v-model="form.print_group_id" :options="objList" :props="objProps" collapse-tags :show-all-levels="false" clearable style="width: 100%;"></el-cascader>
                            </el-form-item>
						</el-col>
					</el-row>
				</el-card>
				<el-card class="box-card">
					<el-row :gutter="1">
						<el-col :span="24">
							<div style="display: flex;align-items: center">
								<div class="titleBox titleBox1">
									字段信息
								</div>
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :span="24">
							<sc-form-table ref="table1" v-model="form.fieldData" :addTemplate="addTemplate" placeholder="暂无数据">
								<el-table-column prop="name" label="字段名称">
									<template #default="scope">
										<el-input v-model="scope.row.name" placeholder="请输入"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="field" label="字段标识">
									<template #default="scope">
										<el-input v-model="scope.row.field" placeholder="请输入"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="form_type" label="数据类型" width="220">
									<template #default="scope">
										<el-select v-model="scope.row.form_type" style="width: 100%" clearable filterable>
											<el-option v-for="item in typeList" :key="item.id" :label="item.text" :value="item.id"/>
										</el-select>
									</template>
								</el-table-column>
							</sc-form-table>
						</el-col>
					</el-row>
				</el-card>
			</el-form>
		</div>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>

</template>

<script>

export default {
	components: {},
	emits: ['success', 'closed'],
	data() {
		return {
			dialog: {
				bjshop: false,
				adaptive: false,
				color: false
			},
			mode: "add",
			titleMap: {
				add: '新增表单',
				edit: '编辑表单',
				show: '查看'
			},
			visible: false,
			isSaveing: false,
			//表单数据
			form: {
				types: '',
				types_name: '',
				form_color: '',
				fieldData: [],
				print_group_id: [],
			},
			//验证规则
			rules: {
				types: [
					{required: true, message: '请输入表单标识'}
				],
				types_name: [
					{required: true, message: '请输入表单名称'}
				],
			},
			addTemplate: {},
			typeList: [
				{
					id: 'input',
					text: '文本'
				},
				{
					id: 'uploadImage',
					text: '图片'
				},
				{
					id: 'table',
					text: '表格（文本）'
				},
				{
					id: 'tableImage',
					text: '表格（图片）'
				}
			],
			colorList: ['#409EFF', '#69E4D0', '#009688', '#84E100', '#536dfe', '#5119EC', '#9260FF',
				'#ff5c93', '#c62f2f', '#fd726d', '#FF853C', '#F4A108', '#FFF600', '#D347EF',
				'#E3497A', '#000000'],
            objList:[],
            objProps: {
                value: "id",
                label: "name",
                emitPath: false,
				checkStrictly: true,
                multiple: true,
            },
		}
	},
	mounted() {
        this.getObject()
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		//表单提交方法
		submit() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = [];
					if (this.mode == 'edit') {
						res = await this.$API.print.formMenu.edit.post(this.form);
					} else {
						res = await this.$API.print.formMenu.add.post(this.form);
					}
					this.isSaveing = false;
					if (res.code == 1) {
						this.$emit('success', this.form, this.mode)
						this.visible = false;
						this.$message.success("操作成功")
					} else {
						this.$alert(res.message, "提示", {type: 'error'})
					}
				} else {
					return false;
				}
			})
		},
		//表单注入数据
		async setData(data) {
			//可以和上面一样单个注入，也可以像下面一样直接合并进去
			// Object.assign(this.form, data)
			var reqData = {types: data.types}
			var res = await this.$API.print.formMenu.detail.get(reqData);
			this.form.fieldData = res.data.list
			this.form.types = res.data.types
			this.form.types_name = res.data.types_name
			this.form.form_color = res.data.form_color
			this.form.print_group_id = res.data.print_group_id
		},
        async getObject() {
			var res = await this.$API.print.object.all.get()
			this.objList = res.data
		}
	}
}
</script>

<style lang="scss">
.widgets-content {
	flex: 1;
	padding: 15px 15px;

	.el-form {
		height: 710px;
		overflow: auto;
		overflow-x: hidden;
	}

	.SeletBox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.el-col {
		margin-right: 22px;
	}

	.el-form-item {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;

		.el-form-item__label {
			justify-content: flex-start;
		}

		.el-form-item__content {
			width: 100%;
		}
	}

	.box-card {
		margin-bottom: 10px;
	}

	.el-form {
		//background: #ffffff;
		//padding: 20px;
		//min-height: 90%;
		.titleBox {
			font-size: 18px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			padding-bottom: 10px;
			border-bottom: 1px solid #E6E6E6;
			margin-bottom: 14px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.titleBox1 {
			font-weight: 600;
			border: none;
			font-size: 16px;
		}
	}
}
</style>
